<template>
    <div class="index clearafter">
        <div class="paientinfo testlist">
            <table>
                <tr>
                    <th colspan="4">
                        开始时间：
                        <input type="text" id="start" v-model="param.startDate"> 结束时间：
                        <input type="text" id="end" v-model="param.endDate">
                        <select v-model="param.content" id="selftestindex">
                            <option value="">全部</option>
                            <option v-for="item in selftestindexdefServicelist" value="{{item}}">{{item}}</option>
                        </select>
                        <button class="normalBtn" id="searchselftest" @click="searchselftestbytime2">搜索</button>
                    </th>
                </tr>
                <tr v-for="item in selftestlist">
                    <td>
                        <button class="default ok noradius">{{item.indexBelongName}}</button>
                    </td>
                    <td>
                        <p v-for="subitem in item.itemList">{{subitem.name}}：<span :class="{colorred:subitem.isDanger=='1'}">{{subitem.value}}</span>{{subitem.unit}}<span class="Danger" v-if="subitem.isDanger=='1'">危</span><span v-show="subitem.measure">措施：{{subitem.measure}}</span><span v-show="subitem.symptomlNameString">症状：{{subitem.symptomlNameString}}</span></p>
                    </td>
                    <td>
                        <button class="default greynobg okborder" @click="showcharts(item)" v-if="item.isshowchart==true">走势图</button>
                    </td>
                    <td>
                        <p>{{item.time.substr(0,10)}}</p>
                        <p>{{item.time.substr(10)}}</p>
                    </td>
                </tr>
                <tr>
                    <td colspan="4">
                        <div class="pull-left">
                            <button class="secondBtn" @click="refresh">刷新</button>
                        </div>
                        <div class="pull-right">
                            <boot-page v-ref:page :async="true" :lens="lenArr" :page-len="pageLen" :headersparam="headersparam" :param="param"></boot-page>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <!--模态框-->
        <div class="modal" id="charts">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" @click="closecharts">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">{{chartstit}}</h4>
                    </div>
                    <div class="modal-body" id="main">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import 'assets/lib/laydate/laydate.js'
import 'assets/lib/laydate/need/laydate.css'
import 'assets/lib/laydate/skins/danlan/laydate.css'
import Public from 'assets/public.js'
var echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/line');
// 引入提示框和标题组件
require('echarts/lib/component/legend');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require('echarts/lib/component/markPoint');
require('echarts/lib/component/dataZoom');
import bootPage from 'components/BootPage.vue'

module.exports = {
    data() {
            return {

                lenArr: [10, 20, 50], // 每页显示长度设置
                pageLen: 5, // 可显示的分页数
                headersparam: {
                    "X-Service-Id": "coms.selftestindexdefService",
                    "X-Service-Method": "findPatientIndexOnWeb",
                },
                param: {
                    firstRequest: "0", //进入列表页面的请求的标识，区别搜索的的请求
                    mpiId: "",
                    endDate: "",
                    startDate: "",
                    content: ""
                }, // 传递参数,
                selftestlist: [],
                chartstit: "", //趋势图title
                selftestindexdefServicelist: []
            }
        },
        props: {
            //      "title":{
            //  type:String,
            //  default:"标题"
            // },

        },
        components: {
            bootPage
        },
        ready() {
            var that = this;
            var myDate = new Date(); //获取今天日期
            // this.param.endDate = Public.formatDate(myDate);
            this.param.endDate = Public.formatDate(myDate);

            myDate.setDate(myDate.getDate() - 7);
            this.param.startDate = Public.formatDate(myDate);
            // 日历插件
            laydate({
                elem: '#start',
                fixed: true,
                max: laydate.now(),
                // min: laydate.now(-30),
                istoday: false,
                choose: function(datas) { //选择日期完毕的回调
                    that.param.startDate = datas
                }
            });
            // 日历插件
            laydate({
                elem: '#end',
                fixed: true,
                max: laydate.now(),
                // min: laydate.now(-30),
                istoday: false,
                choose: function(datas) { //选择日期完毕的回调
                    that.param.endDate = datas
                }
            });

        },
        methods: {
            // 关闭趋势图弹框
                closecharts() {
                    $("#charts").hide();
                },
                //根据起始时间和结束时间搜索健康列表
                searchselftestbytime(mpiidfromparent) {
                    var that = this;
                    this.param.mpiId = mpiidfromparent;
                    var myDate = new Date(); //获取今天日期
                    // this.param.endDate = Public.formatDate(myDate);
                    this.param.endDate = Public.formatDate(myDate);

                    myDate.setDate(myDate.getDate() - 7);
                    this.param.startDate = Public.formatDate(myDate);
                    this.param.content= "";

                    this.refresh();

                        //  查询患者关联疾病的指标所属名称
                        $.when(Public.commonajax("coms.selftestindexdefService", "getIndexBelongNameByMpi", "['" + mpiidfromparent + "']"))
                            .done(function(data) {
                                that.selftestindexdefServicelist = data.body;
                            })


                },
                searchselftestbytime2() {
                    this.param.firstRequest = "0";
                    this.refresh();
                },
                showcharts(item) {
                    var that = this;
                    that.chartstit = item.indexBelongName;
                    $("#charts").show();
                    $("#main").height(430);
                    $("#main").width(600);
                    let tempobj = {
                        "endDate": this.param.endDate,
                        "indexBelongName": item.indexBelongName,
                        "mpiId": this.param.mpiId,
                        "startDate": this.param.startDate

                    };

                    // 获取趋势图数据
                    $.when(Public.commonajax("coms.selftestindexdefService", "patientIndexStaticsOnWeb", "[" + JSON.stringify(tempobj) + "]"))
                        .done(function(res) {
                            // console.log(res.body);
                            let resdata = res.body.bottomData;
                            let legenddata = [],
                                seriesdata = [];
                                // console.log(resdata);
                            if (res.code == 200) {
                                $.each(resdata, function(index, el) {
                                    legenddata.push(el.indexName);
                                    var temobj = {
                                        name: el.indexName,
                                        type: 'line',
                                        data: el.list.map(function(item) {
                                            return item.quantifyVal;
                                        })
                                    }
                                    seriesdata.push(temobj);
                                    //  $.each(el.list,function(index2, el2) {
                                    //     xAxisdata.push(el2.selfTestTime);
                                    // });
                                });
                                // console.log(resdata[0].list[0].selfTestTime.substr(5, 11));
                                let xAxisdata = resdata[0].list.map(function(item) {
                                    return item.selfTestTime.substr(5, 11);
                                });

                                // console.log(xAxisdata);
                                // console.log(legenddata);
                                // if(resdata.length>1){
                                //    legenddata.push(resdata[0].indexName);
                                //    legenddata.push(resdata[1].indexName);
                                // }else{
                                //     legenddata.push(resdata[0].indexName);
                                // }
                                // var arr222=[{
                                //        name: resdata[0].indexName,
                                //        type: 'line',
                                //        data: resdata[0].list.map(function(item) {
                                //            return item.quantifyVal;
                                //        })
                                //    }];

                                // legenddata.push(resdata[0].indexName);
                                console.log(seriesdata);
                                var myChart = echarts.init(document.getElementById('main'));

                                myChart.setOption({
                                    title: {
                                        text: '',
                                    },
                                    tooltip: {
                                        trigger: 'axis'
                                    },
                                    legend: {
                                        data: legenddata,
                                        right: 20
                                    },

                                    xAxis: {
                                        type: 'category',
                                        boundaryGap: false,
                                        data: xAxisdata
                                    },
                                    yAxis: {
                                        type: 'value',
                                        axisLabel: {
                                            formatter: '{value}'
                                        }
                                    },
                                    dataZoom: [{
                                        type: 'slider',
                                        xAxisIndex: 0,
                                        filterMode: 'empty'
                                    }],
                                    series: seriesdata
                                });
                            }
                        })

                },
                refresh() {
                    this.$refs.page.refresh()
                },

        },
        events: {
            // 分页组件传回的表格数据
            'data' (data) {
                $.each(data, function(index, el) {
                    el.isshowchart = el.itemList.some(item =>
                        item.indexType == "01"
                    )
                });
                this.selftestlist = data;
                // console.log(this.selftestlist);
            }
        },
}
</script>
<style scoped>
.paientinfo {
    padding-bottom: 20px;
    border-bottom: 1px dashed #EFEFEF;
    width: 90%;
    margin: 20px auto;
}

.paientinfo table {
    width: 100%;
}

.paientinfo table td p span {
    display: inline-block;
    margin-left: 10px;
    height: 20px;
}

.paientinfo table td .iphone {
    background: url(../assets/img/iphone.png) no-repeat left center;
    padding-left: 20px;
}

.paientinfo table td .other {
    font-size: 12px;
    color: #999;
}

.paientinfo table td .name {
    font-weight: 700;
}

.okborder {
    border: #9E3110 solid 1px;
    color: #9E3110;
    width: 80px
}

.noradius {
    border-radius: 0;
    width: 100px
}

.testlist {
    width: 90%;
    border-bottom: none;
    min-height: 500px
}

.testlist tr {
    border-bottom: 1px dashed #EFEFEF;
    padding: 15px 0
}

.testlist tr th {
    padding: 0 0 20px;
    font-weight: normal;
}

.testlist tr td {
    padding: 15px 0
}

#main {
    width: 600px;
    height: 400px
}

.testlist input {
    border: 1px solid #EFEFEF;
    margin: 0 20px 0 10px;
    padding: 3px 10px 3px 10px
}

#searchselftest {
    display: inline-block;
}

.Danger {
    height: 24px;
    width: 24px;
    color: #fff;
    background: #F8684E;
    display: inline-block;
    border-radius: 50%;
    font-size: 12px;
    text-align: center;
}

.colorred {
    color: #F8684E
}

#selftestindex {
    width: 100px;
    border: 1px solid #EFEFEF;
    margin-right: 10px
}

.w80 {
    width: 80px
}
</style>
